<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:ui="http://java.sun.com/jsf/facelets"                        
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"      >
    <h:head>     
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <link href="#{facesContext.externalContext.requestContextPath}/resources/css/menu.css" rel="stylesheet" type="text/css" />
        <title>Blue Pumpkin Admin Page</title>
    </h:head>
    <h:body>
        <div class="main_body_admin" >
            <div class="separator_div"/>
            <div class="admin_logo"/>

            <h:form id="frmMain">
                <p:menubar style="text-align: center" >
                   
                   <p:menuitem value="Event" style="color: blueviolet; font-weight: bold" styleClass="admin_menu_current" > </p:menuitem> 
                    <p:menuitem value="Prize" actionListener="#{naviagtionControl.redirectToPrizePage()}" ></p:menuitem> 
                    <p:menuitem value="User"   actionListener="#{naviagtionControl.redirectToUserPage()}" ></p:menuitem> 
                    <p:menuitem value="FAQ"  actionListener="#{naviagtionControl.redirectToFAQsPage()}" ></p:menuitem> 
                    <p:menuitem value="Contact" actionListener="#{naviagtionControl.redirectToContactPage()}"  ></p:menuitem> 
                    <p:menuitem value="Registration" actionListener="#{naviagtionControl.redirectToRegistrationPage()}" ></p:menuitem> 
                    <p:menuitem value="Winner" actionListener="#{naviagtionControl.redirectToWinnerPage()}"  ></p:menuitem> 
                    <p:menuitem value="Comment" actionListener="#{naviagtionControl.redirectToCommentsPage()}"  ></p:menuitem> 
                    <p:submenu label="#{userControl.user.fullName}"    >
                         <p:menuitem value="Edit Profile" actionListener="#{userControl.redirectToLogonUserPage()}" ></p:menuitem> 
                        <p:menuitem value="Log out" actionListener="#{userControl.logout()}"  ></p:menuitem> 
                    </p:submenu>

                    

                </p:menubar>
            </h:form>

            <div class="content_display">
                <h:form>
                    <p:toolbar>
                        <p:toolbarGroup>
                            <p:commandButton value="Add Event" actionListener="#{eventControl.redirectToAddEvent()}"/>
                            <p:commandButton value="View Events" actionListener="#{eventControl.redirectToListEvent()}" />

                        </p:toolbarGroup>
                    </p:toolbar>
                </h:form>
                <p:spacer height="5px" />
                <p:panel style="width: 99%;">
                    <h:form enctype="multipart/form-data" id="frmAddEvent">
                        <p:panel id="panel" header="Create New Event">
                            <!--                              <p:growl id="grl" showDetail="true"/>-->
                            <h:panelGrid columns="3">                  

                                <h:outputLabel value="Title:" for="title" />
                                <p:inputTextarea id="title" rows="6" cols="33" value="#{eventControl.newEvent.title}" required="true" requiredMessage="The Title field is required."/>
                                <p:message for="title" />

                                <h:outputLabel value="Photo:" for="photo" />
                                <p:fileUpload id="photo" mode="advanced"  update="preview" sizeLimit="1000000" allowTypes="/(\.|\/)(gif|jpe?g|png)$/" auto="true"  fileUploadListener="#{eventControl.handleFileUploadAddEvent}" />  
                                <div/>

                                <h:outputLabel value="Preview:" for="preview" />
                                <h:commandLink id="preview" value="" ><img src="#{eventControl.newEvent.photo}" alt="" height="100" width="70" /></h:commandLink>
                                <div/>

                                <h:outputLabel value="StartDate" for="startDate"/>
                                <p:calendar value="#{eventControl.newEvent.startDate}" id="startDate" requiredMessage="You must choose a date" required="true"
                                            mindate="#{eventControl.currentDate}"  pattern="MM/dd/yyyy" timeZone="GMT+7">                                      
                                    <p:ajax event="dateSelect" update="endDate, mgsendDate, endRegDate, mgsstartRegDate, msgendRegDate, startRegDate"  />
                                </p:calendar>
                                <p:message id="mgsstartDate" for="startDate"  />

                                <h:outputLabel value="EndDate:" for="endDate" />
                                <p:calendar value="#{eventControl.newEvent.endDate}" id="endDate" requiredMessage="You must choose a date" required="true"
                                            mindate="#{eventControl.newEvent.startDate}" pattern="MM/dd/yyyy" timeZone="GMT+7">

                                    <p:ajax event="dateSelect" update="startDate,mgsendDate, mgsstartDate, endRegDate, mgsstartRegDate, msgendRegDate, startRegDate"  />
                                </p:calendar>
                                <p:message id="mgsendDate" for="endDate" />

                                <h:outputLabel value="StartRegDate:" for="startRegDate" />
                                <p:calendar value="#{eventControl.newEvent.startRegDate}" maxdate="#{eventControl.newEvent.startDate}"   id="startRegDate" mindate="#{eventControl.currentDate}" 
                                            pattern="MM/dd/yyyy" timeZone="GMT+7" required="true" requiredMessage="You must choose a date"
                                            validatorMessage="startRegDate must be less than #{eventControl.newEvent.endRegDate}"  >
                                    <p:ajax event="dateSelect" update="endRegDate, msgendRegDate"  />
                                </p:calendar>
                                <p:message for="startRegDate" id="mgsstartRegDate"  />

                                <h:outputLabel value="EndRegDate:" for="endRegDate" />
                                <p:calendar value="#{eventControl.newEvent.endRegDate}" id="endRegDate" maxdate="#{eventControl.newEvent.startDate}" 
                                            mindate="#{eventControl.newEvent.startRegDate}" pattern="MM/dd/yyyy" timeZone="GMT+7" required="true"  requiredMessage="You must choose a date"
                                            validatorMessage="EndRegDate must greater than #{eventControl.newEvent.startRegDate}" >
                                    <p:ajax event="dateSelect" update="startRegDate, mgsstartRegDate" />
                                </p:calendar>
                                <p:message for="endRegDate" id="msgendRegDate" />


                                <h:outputLabel value="MinPlayer:" for="minPlayer" />
                                <p:inputText id="minPlayer" value="#{eventControl.newEvent.minPlayers}"     title="MinPlayer" validatorMessage="Min players: 0-#{eventControl.MAX_PALYERS}">
                                    <f:validateLongRange for="minPlayer" maximum="#{eventControl.MAX_PALYERS}" minimum="0" />
                                    <p:ajax event="blur" update="maxPlayer, msgmaxPlayer"   />

                                </p:inputText >                                  
                                <p:message id="msgminPlayer" for="minPlayer" />

                                <h:outputLabel value="MaxPlayer:" for="maxPlayer" />
                                <p:inputText id="maxPlayer" value="#{eventControl.newEvent.maxPlayers}" title="MaxPlayer" validatorMessage="Max players: #{eventControl.newEvent.minPlayers} - #{eventControl.MAX_PALYERS}" >
                                    <f:validateLongRange  for="maxPlayer" maximum="#{eventControl.MAX_PALYERS}" minimum="#{eventControl.newEvent.minPlayers}" />
                                    <p:ajax event="blur" update="minPlayer, msgminPlayer"  />
                                </p:inputText>                                   
                                <p:message for="maxPlayer" id="msgmaxPlayer" />

                                <h:outputLabel value="IsActive"/>
                                <p:selectBooleanCheckbox value="#{eventControl.newEvent.active}" />
                                <div/>

                                <h:outputLabel value="Description:" for="description" />
                                <p:editor id="description" value="#{eventControl.newEvent.description}" validatorMessage="Description is not emtpy">

                                </p:editor>
                                <p:message for="description" />

                                <div/>
                                <p:messages autoUpdate="true"/>                                   

                            </h:panelGrid>
                            <h:panelGrid columns="3">
                                <h:outputLabel value="" style="width: 20%"/>
                                <p:commandButton value="Add" actionListener="#{eventControl.insert()}" update="panel"/>
                                <h:commandButton type="reset" value="Reset" style="padding: 0.4em 1em;" styleClass="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" >
                                    <p:ajax event="click" update="frmAddEvent" listener="#{eventControl.resetEventForm()}" />
                                </h:commandButton>
                            </h:panelGrid>
                        </p:panel>
                    </h:form>
                </p:panel>

            </div>
        </div>
    </h:body>
</html>
